<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>OpenWrt Table of Hardware</title>

		<link rel="prefetch" href="static/img/favicon_anim.gif" as="image">
		<link rel="prefetch" href="static/img/favicon_trans.png" as="image">

		<link rel="icon" href="static/img/favicon_anim.gif" />
	    <!-- <link rel="icon" href="static/img/favicon_trans.png" /> -->

		<meta name="description" content="Explore the OpenWrt Table of Hardware. Find detailed compatibility information for routers, access points, and embedded devices supported by OpenWrt firmware.">
		<meta name="keywords" content="OpenWrt, hardware compatibility, Table of Hardware, TOH, router firmware, open-source networking, device support, wireless routers">
		<meta property="og:title" content="OpenWrt Table of Hardware - Device Compatibility Guide">
		<meta property="og:description" content="Comprehensive list of devices compatible with OpenWrt firmware. Find the perfect hardware for your open-source networking project.">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://toh.openwrt.org">


		<!-- Prefetch DNS ------------------------------------>
		<link rel="dns-prefetch" href="https://openwrt.org">
		<link rel="dns-prefetch" href="https://downloads.openwrt.org">


		<!-- External Includes  (copied in local) ------------------------------------>
		<link rel="stylesheet" href="static/css/bootstrap_3.3.7.min.css">
		<link rel="stylesheet" href="static/lib/fontawesome-free-6.6.0/css/all.min.css" />		
		<link rel="stylesheet" href="static/lib/tabulator-6.3.0/css/tabulator.min.css" >

		<script src="static/js/jquery_v1.12.4.min.js"></script>
		<script src="static/lib/tabulator-6.3.0/js/tabulator.min.js"></script>
		<script src="static/js/snarkdown.umd.js"></script>
		<!-- <script src="static/js/xlsx.mini.min.js"></script> -->


		<!-- Internal Includes -------------------------------------------------------->
		<!-- 
		<link rel="stylesheet" href="static/css/toh.css" >
		<script src="static/js/toh_conf.js"></script>
		<script src="static/js/toh_main.js"></script> 
		-->

		<!-- Internal Includes (using today date cache) ------------------------------>
		<script>
			// force cache update each day ----------------------
			let cache = new Date().toISOString().slice(0, 10);
			//allow to use ?cache= to force reload assets
			const urlCache = new URLSearchParams(window.location.search).get('cache');
			cache  += urlCache ? '-' + urlCache : '';
		
			let filesToUpdate = [
				{ type: 'link', href: 'static/css/toh.css' },
				{ type: 'script', src: 'static/js/toh_conf.js' },
				{ type: 'script', src: 'static/js/toh_main.js' }
			];
		
			filesToUpdate.forEach(file => {
				const element = document.createElement(file.type);				
				if (file.type === 'link') {
					element.rel = 'stylesheet';
					element.href = file.href + '?c=' + cache;
				}
				else if (file.type === 'script') {
					element.src = file.src + '?c=' + cache;
					element.async=false;
				}
				document.head.appendChild(element);
			});
		</script>

	</head>
	<body>

		<style>
			#toh-boot-overlay {
				background: rgb(0, 163, 225);
				background: linear-gradient(to top,  rgba(0,175,239,1) 0%,rgba(0,153,209,1) 100%);
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9998;
				opacity: 1;
				animation: fade 5.0s ease forwards;
				/* display: none; */
			}
			@keyframes fade {
				0%     { opacity: 1; }
				50% 	{ opacity: 1; }
				100%   { opacity: 0.8; }
			}
			#toh-boot-overlay-bg{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 120px;
			}
			#toh-boot-span {
				margin-top: 30px;
				font-size: 16px;
				color: #000;
				display: inline-block;
				text-align: center;
				background-color: #fff;
				padding: 15px 30px;
				border-radius: 20px;
				border: 1px solid rgba(0,0,0, 0.5);
				min-width: 230px;
				box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,.4) ;
				opacity: 0.75;
			}
			#toh-boot-logo,
			#toh-boot-logo IMG{
				width: 270px;
			}
			#toh-boot-icon{
				margin-bottom: 20px;
			}

			#toh-boot-logo{
				animation: 0.7s bounce 2s infinite;
			}
			@keyframes bounce {
				0% {
					transform: translateY(0);
					animation-timing-function: ease-in;
				}
				15% {
					transform: translateY(-50px);
					animation-timing-function: ease-out;
				}
				50% {
					transform: translateY(-70px);
					animation-timing-function: ease-in;
					opacity: 0.8;
				}
				85% {
					transform: translateY(-50px);
					animation-timing-function: ease-out;
				}
				100% {
					transform: translateY(0);
				}
			}
		</style>

		<div id="toh-boot-overlay">
			<div id="toh-boot-overlay-bg">
				<div id="toh-boot-logo"><img src="static/img/logo.svg" alt="Logo" /></div>
				<span id="toh-boot-span">
					<div id="toh-boot-icon"><i class="fa-solid fa-arrows-rotate fa-spin fa-2x"></i></div>
					<div id="toh-load-text">Loading page...</div>
				</span>
			</div>
		</div>


		<div id="toh-page">
			
			<div class="container-fluid">

				<div id="toh-header" class="row">
					<div id="toh-header-bg">
						<div id="toh-header-loading"><i class="fa-solid fa-arrows-rotate fa-spin"></i></div>
						<span id="toh-dev-badge" class="badge toh-hidden"><span class="js-toh-app " data-prop="branch"></span> v<b class="js-toh-app" data-prop="version">-</b></span>
						<div id="toh-header-logo"><a href="https://openwrt.org" title="OpenWrt Site"><img src="static/img/logo.svg" alt="Logo" /></a></div>
						<div id="toh-header-title"><h1><a href="#" title="Table Of Hardware">Table Of Hardware</a> </h1></div>
						<div id="toh-header-right">

							<div id="toh-header-search" class="form-inline">
								<div class="form-group" id="toh-search-icon">
									<i class="fa-solid fa-search"></i>
								</div>
								<span id="toh-search" class="toh-hidden">

									<div class="form-group toh-search-group">
										<input type="input" class="form-control toh-search-input" id="toh-search-input-model" data-field="model" placeholder="Model...">
										<span class="form-control-feedback toh-search-clear" id="toh-search-clear-model"><i class="fa-solid fa-circle-xmark"></i></span>
									</div>
									<div class="form-group toh-search-group">
										<input type="input" class="form-control toh-search-input" id="toh-search-input-brand" data-field="brand" placeholder="Brand...">
										<span class="form-control-feedback toh-search-clear" id="toh-search-clear-brand"><i class="fa-solid fa-circle-xmark"></i></span>
									</div>
								</span>
							</div>

							<div id="toh-header-count"><span class="toh-count-rows-full"></span> devices</div>

						</div>
					</div>
				</div>


				<div id="toh-main" class="toh-box">
					
					<div id="toh-top">
						<!-- Filters ------------------- -->
						<div id="toh-top-filters" class="toh-top-block">

							<div id="toh-filters-title" class="toh-top-title">
								<div id="toh-filters-upresets" class="toh-upresets"><span class="toh-upresets-title"><a href="#" title=""><i class="fa-regular fa-circle-question"></i></a></span><span class="toh-filters-presets toh-top-title-presets toh-top-title-upresets toh-upresets-content"></span></div>
								<span class="toh-top-title-left"><a href="#" class="toh-top-title-toggle toh-filters-but-toggle" title="Show/Hide Filters Settings"><i class="fa-fw fa-solid fa-caret-right"></i>Filters :</a> <a class='toh-filters-clear toh-but-clearfilters' title='Clear Filters'><i class='fa fa-solid fa-xmark'></i> Clear</a></span>
							</div>
							
							<div id="toh-filters-container" class="toh-top-container toh-hidden">

								<div id="toh-filters-options">
									<div class="toh-options-title"><a href="#" title="Automatically show columns related to the selected features">Links Columns View <i class="fa-regular fa-circle-question"></i></a></div>
										<div class="toh-options-radios">
											<div><input type="radio" name="filtcol" value="none" id="toh-radio-opt-none" checked="true">	<label for="toh-radio-opt-none">Don't change</label></div>
											<div><input type="radio" name="filtcol" value="add" id="toh-radio-opt-add">					<label for="toh-radio-opt-add">Add filtered</label></div>
											<div><input type="radio" name="filtcol" value="repl" id="toh-radio-opt-repl">					<label for="toh-radio-opt-repl">Only filtered</label></div>											 
										</div>									
								</div>
	
								<div id="toh-filters-presets" class="">
									<div class="toh-filters-subtitle">Presets:</div>
									<div class="toh-filters-list toh-filters-presets" ></div>
								</div>
								
								<div id="toh-filters-features" class="toh-filters">
									<div class="toh-filters-list row" >									
											<div class="col-md-12">
												<div id="toh-filters-features-content" class="toh-filters-list-multi"></div>
											</div>
									</div>
								</div>

							</div>

						</div>
					
						<!-- Views ------------------- -->						
						<div id="toh-top-cols" class="toh-top-block">

							<div id="toh-cols-title" class="toh-top-title">
								<div id="toh-cols-upresets" class="toh-upresets"><span class="toh-upresets-title"><a href="#" title=""><i class="fa-regular fa-circle-question"></i></a></span><span class="toh-top-title-presets toh-top-title-upresets toh-upresets-content"></span></div>
								<span class="toh-top-title-left"><a href="#" class="toh-top-title-toggle toh-cols-but-toggle" title="Show/Hide Columns Settings"><i class="fa-fw fa-solid fa-caret-right"></i>Columns :</a></span><span id="toh-cols-presets" class="toh-top-title-presets"></span>								
							</div>

							<div id="toh-cols-container" class="toh-top-container toh-hidden">
								<div class="toh-cols-list row">
									<div class="col-md-12">
										<div id="toh-cols-columns-content" class="toh-cols-list-multi"></div>
									</div>
								</div>
							</div>

						</div>

						<div id="toh-upreset-popup-save" class="toh-hidden">
							<input type="text" size="10" placeholder="name">
							<div class="toh-desc-mini">(up to <b id="toh-upreset-popup-max">8</b> characters)</div>
							<div><button class="toh-popup-button">Save (as Cookie)</button></div>
						</div>

						<!-- Buttons ------------------- -->						
						<div id="toh-top-buttons">
							<div class="toh-buttons-left">
								<a href="#" class="toh-but toh-but-clearheadersorts"><i class="fa-solid fa-xmark"></i> Clear Header Sorts</a>
							</div>
							<div class="toh-buttons-right">
								<a href="#" class="toh-but toh-but-clearfilters"><i class="fa-solid fa-xmark"></i> Clear Filters</a>
								<a href="#" class="toh-but toh-but-clearheaderfilters"><i class="fa-solid fa-xmark"></i> Clear Header Filters</a>
								<a href="#" class="toh-but toh-but-clearallfilters"><i class="fa-solid fa-xmark"></i> Clear All Filters</a>
							</div>
						</div>

					</div>
		
					<!-- Main Table ------------------- -->		
					<div id='toh-table-container'>
						<div id='toh-table'></div>		
					</div>

					<div id="toh-bot">
						<div id="toh-bot-buttons">
								<span id="toh-bot-but-title">Export Table Data :</span> 
								<select name="dlrange">
									<option value="all">All</option>
									<option value="active" selected>Filtered</option>
								</select> 
								rows, with <span class="toh-count-cols-full"></span> shown columns 
								<span id="toh-bot-but-group">
									<a href="#" class="toh-but toh-but-download" data-dltype="csv" title="Download as CSV"><i class="fa-solid fa-download"></i> CSV</a> 
									<!-- <a href="#" class="toh-but toh-but-download" data-dltype="xlsx" title="Download as Excel"><i class="fa-solid fa-download"></i> Excel (.xlsx)</a>  -->
									<a href="#" class="toh-but toh-but-download" data-dltype="json" title="Download as JSON"><i class="fa-solid fa-download"></i> JSON</a> 
								</span>
						</div>
					</div>

					<div id="toh-image-preview"></div>

				</div>


				<div id="toh-info" class="row">
					
					<div class="col-sm-12">
						<div id="toh-tips" class="toh-box">
							<h4><i class="fa-regular fa-lightbulb"></i> Tips</h4>
							<ul>
								<li>Access detailed information by clicking items in the Brand or Model column</li>
								<li>Add multiple sorting criteria by holding Shift while clicking column headers</li>
								<li>Reorder columns by dragging their headers left or right</li>
								<li>Adjust column width by dragging the border between columns</li>
								<li>View images by hovering over picture icons</li>
								<li>Sort a column by clicking its header (toggles between asc., desc., and no order)</li>
								<li>Store/recall your own filters or column presets by using the right tabs (1, 2, 3)</li>
							</ul>
						</div>
					</div>

					<div class="col-sm-12">
						<div id="toh-changelog" class="toh-box toh-hidden">
							<div id="toh-changelog-desc">(This is only shown in Develop mode)</div>	
							<h4><i class="fa-solid fa-list"></i> ChangeLog since latest release  <a href="https://github.com/openwrt/toh-openwrt-org/blob/develop/CHANGELOG.md" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a> </h4>
							<div id="toh-changelog-latest" class="toh-changelog-list"></div>	
							<hr>				
							<h4><i class="fa-regular fa-clock"></i> Previous Releases</h4>
							<div id="toh-changelog-previous" class="toh-changelog-list"></div>					
						</div>
					</div>

				</div>

			</div>

			<div id="toh-footer" class="row">
				<div id="toh-footer-bg">
					<div class="container">
						This project (version <b class="js-toh-app" data-prop="version">-</b>) is available at <a href="https://github.com/openwrt/toh-openwrt-org/" target="_blank">Github</a>. Made with love by <a href="https://github.com/soif" target="_blank">Soif</a> and all <a href="https://github.com/openwrt/toh-openwrt-org/graphs/contributors" target="_blank">contributors</a>.
					</div>
				</div>
			</div>

		</div>
	</body>
</html>
